<template>
    <div>
        <el-dialog v-model="props.visible" title="机台纸张列表" width="70%" @close="handleCancel">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-row>
                    <el-form-item label="纸张编码" prop="code">
                        <el-input
                            v-model="queryParams.code"
                            placeholder="请输入纸张编码"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="纸张名称" prop="name">
                        <el-input
                            v-model="queryParams.name"
                            placeholder="请输入纸张名称"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">
                            搜索
                        </el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-table
                v-loading="loading"
                :data="userList"
                stripe
                border
                style="cursor: pointer"
                @cell-click="handleCellClick"
            >
                <el-table-column label="序号" width="60" type="index" align="center" />
                <el-table-column label="纸张编码" align="center" prop="code"></el-table-column>
                <el-table-column label="纸张名称" align="center" prop="name" />
                <el-table-column label="规格型号" align="center" prop="specs">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_specs" :value="scope.row.specs" />
                    </template>
                </el-table-column>
                <el-table-column label="纸张品牌" align="center" prop="brand">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_brand" :value="scope.row.brand" />
                    </template>
                </el-table-column>
                <el-table-column label="计量单位" align="center" prop="unit">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_unit" :value="scope.row.unit" />
                    </template>
                </el-table-column>
                <el-table-column label="客/厂料" align="center" prop="material">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_material" :value="scope.row.material" />
                    </template>
                </el-table-column>
                <el-table-column label="定量" align="center" prop="weight" />
                <el-table-column label="机台库存" align="center" prop="quantity" />

            </el-table>
            <div class="footer">
                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                />
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
const emit = defineEmits(['changeUpdate'])
import { Machinelist } from '@/api/storage/internalTransfer.js'
const { proxy } = getCurrentInstance()
const { mes_paper_specs, mes_paper_brand, mes_paper_unit, mes_paper_material } = proxy.useDict(
    'mes_paper_specs',
    'mes_paper_brand',
    'mes_paper_unit',
    'mes_paper_material'
)
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    outMachineid: {
        type: String,
    },
})
watch(
    () => props.visible,
    val => {
        if (val) {
            queryParams.value.MachineId = props.outMachineid
            handleQuery()
        }
    }
)

const userList = ref([])
const loading = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    outMachineid: undefined,
})
const total = ref(0)
// 选中当前行
const handleCellClick = row => {
    proxy.$modal
        .confirm('是否确认选择「' + row.name + '」')
        .then(function () {
            emit('changeUpdate', row)
        })
        .catch(() => {})
}

const handleCancel = () => {
    proxy.resetForm('queryRef')
    emit('cancel')
}
const getList = async () => {
    loading.value = true
    const res = await Machinelist(queryParams.value)
    loading.value = false
    userList.value = res.rows
    total.value = res.total
}
// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm('queryRef')
    handleQuery()
}
// getList()
</script>

<style lang="scss" scoped></style>
